<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-09-22 18:39:16
-->
<template>
<!-- 2.创建一个图标容器，容纳图表 -->
  <div ref='root' style="height:150px">
    
  </div>
</template>

<script>
// 1.引入
import { DualAxes } from '@antv/g2plot'
// import { ref } from '@vue/reactivity'
// import { onMounted } from '@vue/runtime-core'
import { ref, onMounted } from "vue";
export default {
  // vue3新特性 setup
  setup(){
    // 获取root
    let root = ref(null)
    // 初始化实例对象
    let dualAxes = null;
    // 3.创建一个折线图实例对象
    let initCharts = () => {
      const data = [
        { mouth: 'Jan', 12315: 3, 12301: 10 },
        { mouth: 'Feb', 12315: 4, 12301: 4 },
        { mouth: 'Mar', 12315: 3.5, 12301: 5 },
        { mouth: 'Apr', 12315: 5, 12301: 5 },
        { mouth: 'May', 12315: 4.9, 12301: 4.9 },
        { mouth: 'Jun', 12315: 6, 12301: 35 },
        { mouth: 'Jul', 12315: 7, 12301: 7 },
        { mouth: 'Sep', 12315: 9, 12301: 1 },
        { mouth: 'Oct', 12315: 13, 12301: 20 },
        { mouth: 'Nov', 12315: 13, 12301: 20 },
        { mouth: 'Dec', 12315: 13, 12301: 20 },
      ];
      dualAxes = new DualAxes(root.value,{
        data:[data, data],
        xField: 'mouth',
        yField: ['12315', '12301'],
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5B8FF9',
          },
          {
            geometry: 'line',
            color: '#5AD8A6',
          },
        ],
              tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
         xAxis: {
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 13,
            },
          },
        },
        yAxis: {
          grid: {
            line: {
              style: {
                lineDash: [2, 3],
                strokeOpacity: 0.2,
              },
            },
          },
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },    
      })
      // 4.渲染
      dualAxes.render()
    }

    // onMouted和mouted作用一致
    onMounted(initCharts)

    return{
      root
    }
  }
}
</script>